<template>
  <div class="layout-wrap">
    <div class="layout-aside"></div>
    <div class="layout-section">
      <div class="loading-page" v-if="loading">
        <div class="loading-container">
          <div class="loading-content">
            <div class="pageLoading">
              <svg class="gear gear_left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                <path id="p" fill="#0E6CCB"
                      d="M94.1 58.8c.6-2.8.9-5.8.9-8.8s-.3-6-.9-8.8l-11.7-.4c-.7-2.6-1.7-5-3-7.3l8-8.5c-3.3-4.9-7.5-9.2-12.5-12.5l-8.5 8c-2.3-1.3-4.7-2.3-7.3-3l-.3-11.6C56 5.3 53 5 50 5s-6 .3-8.8.9l-.4 11.7c-2.6.7-5 1.7-7.3 3l-8.5-8c-4.9 3.3-9.2 7.5-12.5 12.5l8 8.5c-1.3 2.3-2.3 4.7-3 7.3l-11.6.3C5.3 44 5 47 5 50s.3 6 .9 8.8l11.7.4c.7 2.6 1.7 5 3 7.3l-8 8.5c3.3 4.9 7.5 9.2 12.5 12.5l8.5-8c2.3 1.3 4.7 2.3 7.3 3l.4 11.7c2.7.5 5.7.8 8.7.8s6-.3 8.8-.9l.4-11.7c2.6-.7 5-1.7 7.3-3l8.5 8c4.9-3.3 9.2-7.5 12.5-12.5l-8-8.5c1.3-2.3 2.3-4.7 3-7.3l11.6-.3zM50 66.9c-9.3 0-16.9-7.6-16.9-16.9S40.7 33.1 50 33.1 66.9 40.7 66.9 50 59.3 66.9 50 66.9z">
                </path>
              </svg>
              <svg class="gear gear_right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                <use href="#p">
                  <path id="p" fill="#0E6CCB"
                        d="M94.1 58.8c.6-2.8.9-5.8.9-8.8s-.3-6-.9-8.8l-11.7-.4c-.7-2.6-1.7-5-3-7.3l8-8.5c-3.3-4.9-7.5-9.2-12.5-12.5l-8.5 8c-2.3-1.3-4.7-2.3-7.3-3l-.3-11.6C56 5.3 53 5 50 5s-6 .3-8.8.9l-.4 11.7c-2.6.7-5 1.7-7.3 3l-8.5-8c-4.9 3.3-9.2 7.5-12.5 12.5l8 8.5c-1.3 2.3-2.3 4.7-3 7.3l-11.6.3C5.3 44 5 47 5 50s.3 6 .9 8.8l11.7.4c.7 2.6 1.7 5 3 7.3l-8 8.5c3.3 4.9 7.5 9.2 12.5 12.5l8.5-8c2.3 1.3 4.7 2.3 7.3 3l.4 11.7c2.7.5 5.7.8 8.7.8s6-.3 8.8-.9l.4-11.7c2.6-.7 5-1.7 7.3-3l8.5 8c4.9-3.3 9.2-7.5 12.5-12.5l-8-8.5c1.3-2.3 2.3-4.7 3-7.3l11.6-.3zM50 66.9c-9.3 0-16.9-7.6-16.9-16.9S40.7 33.1 50 33.1 66.9 40.7 66.9 50 59.3 66.9 50 66.9z">
                  </path>
                </use>
              </svg>
              <div class="text">系统加载中...</div>
            </div>
          </div>
        </div>
      </div>
      <router-view v-if="isRouterAlive"></router-view>
    </div>
  </div>
</template>

<script>
import {mapMutations} from "vuex";

export default {
  name: 'Layout',
  data() {
    return {
      loading: true,
      isRouterAlive: false,
    }
  },
  created() {
    this.getUserInfo()
  },
  computed: {},
  methods: {
    ...mapMutations({
      setUserInfo: 'setUserInfo',
    }),
    // 通过声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(() => {
        this.isRouterAlive = true;
      })
    },
    getUserInfo(){
      this.loading = true
      this.isRouterAlive = false;
      this.$api.getUserInfo().then(res => {
        this.setUserInfo(res.data)
      }).finally(() => {
        this.loading = false
        this.reload()
      })
    }
  }
}
</script>

<style lang="scss">
@import "/src/assets/scss/base.scss";

.layout-wrap {
  width: 100%;
  height: 100%;

  .layout-aside {
    width: 50px;
    background: linear-gradient(90deg, #15314A 0%, #0E2233 100%);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
  }

  .layout-section {
    margin-left: 50px;
    width: calc(100% - 50px);
  }

  .loading-page {
    width: 100%;
    min-height: calc(100vh);
    background: #f5f7f9;

    .loading-container {
      @include center-container;
      padding: 20px 0 20px;
      box-sizing: border-box;

      .loading-content {
        width: 100%;
        height: calc(100vh - 140px);
        border-radius: 1px;
        overflow: hidden;

        .pageLoading {
          position: relative;
          vertical-align: middle;
          text-align: center !important;
          white-space: normal;
          display: inline-block;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);

          .gear {
            position: absolute;
            left: calc(50% - 59px);
            top: 0;
            width: 64px;
            height: 64px;
          }

          .gear_left {
            margin: 0;
            animation: loading 3s linear infinite;
          }

          .gear_right {
            left: calc(50% - 59px + 52px);
            top: 32px;
            animation: loading 3s linear infinite;
            animation-direction: reverse;
          }

          @keyframes loading {
            100% {
              transform: rotate(360deg);
            }
          }

          .text {
            font-weight: 700 !important;
            color: #0E6CCB;
            font-size: 20px;
            margin-top: 116px;
          }
        }
      }
    }
  }
}
</style>
